<template>
  <div>
    <el-main>
      <div class="form_title">项目信息</div>
      <div class="form_content">
        <el-row :gutter="20">
          <el-col :span="4">
            <p>名称</p>
          </el-col>
          <el-col :span="20">
            <p>{{ model.name }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <p>小程序ID</p>
          </el-col>
          <el-col :span="20">
            <p>{{ model.appId }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <p>状态</p>
          </el-col>
          <el-col :span="20">
            <p v-if="isEdit">{{ Status[model.status]["name"] }}</p>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <p>备注</p>
          </el-col>
          <el-col :span="20">
            <p>{{ model.remark }}</p>
          </el-col>
        </el-row>
      </div>
    </el-main>
    <el-footer>
      <el-button
        type="primary"
        icon="el-icon-edit"
        size="small"
        @click="handleSave"
      >编辑</el-button
      >
    </el-footer>
  </div>
</template>

<script>
import {getProject} from "@/api/project/project";
import {ApiError} from "@/utils/errors";
import { Status } from "@/utils/constant/status";

export default {
  data() {
    return {
      Status,
      isEdit: false,
      model: {
        name: null,
        appId: null,
        secret: null,
        status: null,
        remark: null
      }
    }
  },
  created() {
    this.get();
  },
  methods: {
    get(){
      const that = this;
      getProject().then(res => {
        if (res.status == 200) {
          if (!res.data.success) {
            return this.$message.error(ApiError.msg(res.data.message));
          }
          if(res.data.data){
            that.isEdit = true;
            that.model.id = res.data.data.id;
            that.model.name = res.data.data.name;
            that.model.appId = res.data.data.appId;
            that.model.secret = res.data.data.secret;
            that.model.status = res.data.data.status;
            that.model.remark = res.data.data.remark;
          }
        }
      });
    },
    handleSave(){
      this.$router.push({path: "project-save"});
    }
  }
}
</script>

<style lang="scss" scoped>
.form_title {
  padding-bottom: 20px;
  font-size: 16px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.85);
}
.form_content {
  font-size: 14px;
  padding-right: 16px;
}
.input_suffix {
  display: inline-block;
  padding: 0 6px;
}
.el-divider {
  margin: 6px 0 16px;
}
.add_new_batch {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  height: 45px;
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  color: #8c939d;
}
.batch_block {
  margin-top: 16px;
}
.batch_block:first-child {
  margin-top: 0;
}
@import "@/styles/full-form";
@import "@/styles/common-table";
</style>
